<template>
    <div class="zixunDetail">
        <PublicHead></PublicHead>
        <div class="zixunBox" v-for="(item, index) in title" :key="index">
            <div class="item">
                <div class="name">
                    <p>{{ item.phone }}:</p>
                    <p>{{ item.gmtCreate | dateFormat() }}</p>
                </div>
                <div class="talk">
                    <img src="../assets/img/login/user.png" alt="">
                    <div>
                        <p>【信件标题】：{{ item.messageSubject }}</p>
                        <p>【信件内容】：{{ item.leaveMessage }}</p>

                    </div>
                </div>
            </div>
            <div class="reply" v-for="(item, index) in list" :key="index">
                <div class="name">
                    <p>工作人员回复内容</p>
                    <p>{{ item.gmtCreate | dateFormat() }}</p>
                </div>
                <div class="talk">
                    <img src="../assets/img/login/kefu.png" alt="">
                    <div>
                        <p>您好！来信已收悉，现答复如下：</p>
                        <p style="word-wrap:break-word">{{ item.leaveMessage }}</p>

                    </div>
                </div>
            </div>
        </div>
        <PublicFoot></PublicFoot>
    </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { message_detail, message_title } from '../api/api';
export default {
    data() {
        return {
            list: [],
            username: this.$store.state.userName,
            title: []
        }

    },
    filters: {
        dateFormat(value) {
            if (!value) return '';
            const date = new Date(value);
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        },
    },
    mounted() {
        message_detail({ id: localStorage.getItem('zixunId') }).then((res) => {
            console.log(res.data.data);
            this.list = res.data.data
        })
        message_title({ id: localStorage.getItem('zixunId') }).then((res) => {
            this.title = [res.data.data]
            console.log(this.title);
        })
    },
    components: {
        PublicHead,
        PublicFoot,
    }
}
</script>

<style lang="scss" scoped>
.zixunDetail {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .zixunBox {
        width: 1220px;
        height: 100%;
        min-height: 720px;
        background: #FFFFFF;
        box-sizing: border-box;
        padding: 30px;

        .item {
            margin-bottom: 50px;

            .name {
                display: flex;
                color: #1285D7;
                margin: 0px 7%;

                p {
                    margin-right: 20px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #1285D7;
                }
            }

            .talk {
                display: flex;

                img {
                    width: 69px;
                    height: 69px;
                }

                div {
                    width: 1057px;
                    height: 112px;
                    background: url('../assets/img/duihua.png');
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    p {
                        margin: 10px 50px;
                    }
                }
            }
        }

        .reply {
            .name {
                display: flex;

                margin: 0px 7%;

                p {
                    margin-right: 20px;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #626262;
                }
            }

            .talk {
                display: flex;

                img {
                    width: 69px;
                    height: 69px;
                }

                div {
                    width: 1057px;
                    height: 112px;
                    background: url('../assets/img/login/kefuduihua.png');
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-bottom: 30px;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    p {
                        margin: 10px 50px;
                    }
                }
            }
        }
    }
}
</style>